<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="outer" :style="{ height: heightValue + 'px' }">
        <div class="title" :style="{ color: module.data.titleColor }">
            <img v-if="module.data.icon" class="icon" :src="module.data.icon" />
            {{ module.data.titleText }}
        </div>
        <div :style="{ color: module.data.btnColor, borderRadiusColor: module.data.btnColor }" class="btn">
            {{ module.data.btnText }}</div>

        <img class="hand" src="@/assets/images/pagemaker/hand.png" />

    </div>
</template>

<script>
import Empty from "./Base/Empty";
export default {
    components: {
        Empty,
    },
    data () {
        return {
            loading: false,
        };
    },
    props: {
        module: { type: Object },
    },

    watch: {},

    mounted: function () { },

    computed: {
        heightValue: function () {
            var v = this.module.height;
            if (v && v.value) {
                return v.value;
            }
            return 100;
        },
    },

    methods: {},
};
</script>

<style scoped>
.outer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30px;
}

.outer .title {
    font-size: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.outer .title .icon {
    height: 80px;
    width: 80px;
    margin-right: 20px;
}

.outer .btn {
    height: 52px;
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    font-size: 26px;
}

.outer .hand {
    width: 75px;
    height: 60px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    animation: handmove 1s ease-in-out 1s infinite normal;
}

@keyframes handmove {
    from {
        bottom: 30px;
        right: 30px;
    }

    to {
        bottom: 10px;
        right: 10px;
    }

}
</style>
